<template>
  <div class="container index-wrap">
    <headerBar :title="local.logoText" isHome="true" @changeLan="changeLan" :isNoReturn="true"></headerBar>
    <div>
      <div class="wrap form-warp">
        <div class="title jt_flex jt_flex_dc">
          <div class="jt_flex"><img src="/static/style/logo.png" class="logo-img"/></div>
        </div>
        <div class="bottom-box">
          <div class="num">{{local.contacts}}：</div>
          <input class="num-input" :value="phone" v-model="phone" :placeholder="local.peleaseEnter"/>
          <div class="num">{{local.password}}：</div>
          <input class="num-input" :value="password" v-model="password"  type="password" :placeholder="local.peleaseEnter"/>
          <div class="flex-cen">
            <div class="sys-login fs_12" @click="Login()">{{local.login}}</div>
          </div>
          <div class="flex-cen">
            <button class="wechat-login fs_12" open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="getphonenumber">{{local.wechatLogin}}
            </button>
          </div>
        </div>
      </div>
      <div class="copy-right">© {{local.copyright}}.</div>
      <div class="index-circle left-bottom-circle "></div>
      <div class="right-bottom-circle index-circle"></div>
      <div class="right-top-circle index-circle"></div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
import home from '@/api/home'
import headerBar from '@/components/headerBar'
export default {
  mpType: 'page',
  components: {
    card,
    headerBar
  },
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      phone: '',
      password: '',
      code: '',
      local: wx.getStorageSync('local'),
      loginFlag: true
    }
  },
  onShow () {
    this.initLang()
    this.phoneLogin()
    this.password='' // 重新进入时清空密码
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
    },
    changeLan (val) {
      this.local = val
    },
    routerToUrl (url) {
      wx.navigateTo({
        url
      })
    },
    // 系统账号登录
    Login () {
      wx.showLoading({
        title: `${this.local.logging}`
      })
      if(this.phone == ''){
        wx.showToast({
          title: this.local.phoneTip,
          icon: 'none',
          duration: 2000
        })
        return
      }
      if(this.password == ''){
        wx.showToast({
          title: this.local.passwordTip,
          icon: 'none',
          duration: 2000
        })
        return
      }
      home.Login({username: this.phone, password: this.password}).then(res =>{
        let {data, code, msg} = res
        if (data) {
          const token = data.token
          wx.setStorageSync('token', token)
          wx.setStorageSync('userName', data.userName)
          wx.setStorageSync('userId', data.userId)
          wx.setStorageSync('informTypeCount', data.informTypeCount)
        }
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        wx.reLaunch({
          url: '/pages/home/index'
        })
        wx.hideLoading()
      }).catch(err => {
        wx.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
      }) 
    },
    // 微信号登录
    getphonenumber (e) {
      let detail = e.mp.detail
      if(Object.keys(detail).includes('iv')){
        //允许微信授权，获取手机号码
         wx.showLoading({
          title: `${this.local.logging}`
        })
        this.getphone(detail.iv, detail.encryptedData)
      }
    },
    async getphone (iv, encryptedData) {
      let phone = ''
      const {code, msg} = await home.getPhoneNumber({code: this.code, iv: iv, encryptedData: encryptedData})
      if(code !== 0){
        wx.showToast({
          title: msg,
          duration: 4000,
          icon: 'none'
        })
        return
      }
      phone = msg
      wx.setStorageSync('phone', phone)
      this.getphoneLogin(phone)
    },
    async getphoneLogin (phone) {
      const {code, data, msg} = await home.phoneLogin({phoneNum: phone})
      if(code == 1100){
        this.loginFlag = false
        wx.showToast({
          title: `【${phone}】${msg}`,
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (code !== 0) {
        wx.showToast({
          title: msg,
          duration: 2000,
          icon: 'none'
        })
        return
      }
      wx.setStorageSync('token', data.token)
      wx.setStorageSync('userName', data.userName)
      wx.setStorageSync('userId', data.userId)
      wx.setStorageSync('informTypeCount', data.informTypeCount)
      // 跳转到首页
      wx.reLaunch({
        url: `/pages/home/index?username=${this.phone}`
      })
      wx.hideLoading()
    },
    // 获取code
    phoneLogin () {
      const that = this
      wx.login({
        success (res) {
          that.code = res.code
        }
      })
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
@import 'index';
</style>
